<template>
  <div class="container">
    <mt-header title="请选择你的所在地">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="list">
      <mt-index-list>
        <div v-for="(item, index) in data" :key="index">
          <mt-index-section :index=item.letter>
            <div @click="go(item2.name)" v-for="(item2, index2) in item.data" :key="index2">
              <mt-cell :title=item2.name></mt-cell>
            </div>
          </mt-index-section>
        </div>
      </mt-index-list>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      chooseCity: [],
      id: ""
    }
  },
  methods: {
    getCityList() {
      this.$axios({
        url: this.$api.cityTree,
        method: 'get',
      }).then(res => {
        this.data = res.data
      })
    },
    go(city) {
      this.$router.push({ path: '/houseindex', query: { city: city } },);
    },

  },
  mounted() {
    this.getCityList()
  }
}
</script>
<style lang="scss" scoped>
.list {
  height: 100%;
}
</style>